<template>
    <img alt="Blog logo" src="@/assets/blogLogo.png" width="400" height="120">

  <div class="register">

      <el-container>

          <el-header>
            <br><br><br><br><br>
              <h1>欢迎使用 F-Blog 氢客</h1>
              <h1>请输入要注册的信息</h1>
          </el-header>

          <el-main>
            <br><br><br><br><br><br><br><br>
              <div style="text-align: -webkit-center">
                  <el-form-item label-width="350px" style="width: max-content">
                      <el-col :span="14" >
                          请输入手机号注册：<el-input v-model="registerUser.registerUsername" name="registerUsername">
                          </el-input>
                          密码：<el-input type="password" show-password=true v-model="registerUser.registerPassword" name="registerPassword">
                          </el-input>
                          再次输入密码：<el-input type="password" show-password=true v-model="registerUser.secondPassword" name="secondPassword">
                          </el-input>
                          <div>
                              <br>
                              <el-button type="warning" @click="onReturnLoginSubmit">返回登录</el-button>
                              <el-button type="primary" @click="onRegisterSubmit" :disabled="registerButtonStatus">提交注册</el-button>
                          </div>
                      </el-col>
                  </el-form-item>
              </div>
          </el-main>


          <el-footer>
            FxTG-Blog Studio
          </el-footer>
      </el-container>
  </div>

</template>


<script>
import { ElMessage } from 'element-plus'
import router from '@/router'
import { userRegister } from '@/api/user'

export default {
    name: "UserRegister",
    data() {
        return {
            registerButtonStatus: false,
            registerUser: {
                registerUsername: '',
                registerPassword: '',
                secondPassword: '',
            },
            msg:{
                Code : '',
                Data: '',
            }
        }
    },
    methods:{
        //返回登录页面
        onReturnLoginSubmit(){
            router.push("/login")
        },
        onRegisterSubmit(){
            console.log("register")

            //禁用按钮
            this.intervalShowButton()

            //清除头尾空格
            this.registerUser.registerUsername = this.registerUser.registerUsername.trim()

            //校验表单数据
            //用户名：由手机号组成，必须为11位
            var usernamePattern = /0?(13|14|15|17|18)[0-9]{9}/
            //密码：密码必须是6~12位之间的数字，不能使用字母和特殊字符
            var passwordPattern = /^[0-9]{6,12}$/

            //校验用户名
            if(!usernamePattern.test(this.registerUser.registerUsername)){
                ElMessage.error('用户名由手机号组成，必须为11位')
                return
            }else if(!passwordPattern.test(this.registerUser.registerPassword)){ //校验密码
                ElMessage.error('密码必须是6~12位之间的数字，不能使用字母和特殊字符')
                return
            }else if(!(this.registerUser.registerPassword === this.registerUser.secondPassword)){  //校验两次密码是否一致
                ElMessage.error('两次密码不一致')
                return
            }


            //校验是否存在于数据库
            //发送axios请求
            userRegister(this.registerUser).then(res => {
                this.msg = res.data
                console.log(res.data + "---")
                console.log("解析请求中")
                setTimeout(() => {
                    console.log("解析完成")
                }, 10)

                return res.data
                
            }).catch(err => {
                console.log(err)
            }).finally(() => {
                console.log(this.msg)
                setTimeout(() => {
                    //等待
                    this.registerVerify()
                }, 1000)
            })
        },
        //注册验证
        registerVerify(){
            if(this.msg.Code === "201"){
                //登录成功
                //弹出气泡提示
                ElMessage({
                    message: '注册成功',
                    type: 'success',
                })
                //跳转回登录页面
                router.push("/login")
                return true
            }else{
                //注册失败
                ElMessage.error('前端：注册失败，用户名已存在')
            }
            console.log(this.msg)
        },
        //按钮恢复计时
        intervalShowButton() {
            this.registerButtonStatus = true;
            let _this = this;
            this.timer = setTimeout(() => {
                _this.registerButtonStatus = false;
            }, 2000);
        }
    }
}
</script>
